<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<title><spring:message code="label.title" /></title>
<SCRIPT language="javascript">
	function addRow(tableID) {

		var table = document.getElementById(tableID);

		var rowCount = table.rows.length;
		var row = table.insertRow(rowCount);

		var cell3 = row.insertCell(0);
		var element2 = document.createElement("input");
		element2.type = "text";
		var length = (table.rows.length) - 1;
		element2.name = "rotas[" + length + "].origem";
		cell3.appendChild(element2);

		var cell4 = row.insertCell(1);
		var element3 = document.createElement("input");
		element3.type = "text";
		length = (table.rows.length) - 1;
		element3.name = "rotas[" + length + "].destino";
		cell4.appendChild(element3);

		var cell5 = row.insertCell(2);
		var element4 = document.createElement("input");
		element4.type = "text";
		length = (table.rows.length) - 1;
		element4.name = "rotas[" + length + "].distancia";
		cell5.appendChild(element4);

	}


</SCRIPT>
<style type="text/css">
body {
	font-family: sans-serif;
}

.data,.data td {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #aaa;
	margin: 2px;
	padding: 2px;
}

.data th {
	font-weight: bold;
	background-color: #5C82FF;
	color: white;
}
</style>
</head>
<body>

	<h2>
		<spring:message code="label.title" />
	</h2>

	<form:form method="post" action="add.html" commandName="mapa">

		<table>
			<tr>
				<td><form:label path="nome">
						<spring:message code="label.nome" />
					</form:label></td>
				<td><form:input path="nome" /></td>
			</tr>
			<tr>
				<td colspan="2">
					<TABLE id="dataTable" width="350px" border="1">
						<TR>
							<TD style="width: 10%;"><spring:message code="label.origem" />: <INPUT type='text' name="rotas[0].origem" /></TD>
							<TD style="width: 10%;"><spring:message code="label.destino" />: <INPUT type='text' name="rotas[0].destino" /></TD>
							<TD style="width: 10%;"><spring:message code="label.distancia" />: <INPUT type='text' name="rotas[0].distancia" /></TD>
						</TR>
					</TABLE>
				</td>
			</tr>
			<tr>
				<td colspan="2"><INPUT type="button" value="+"
					onclick="addRow('dataTable')" /></td>
			</tr>
			<tr>
				<td colspan="2"><INPUT type="submit"
					value="<spring:message code="label.addmapa"/>"/></td>
			</tr>

		</table>
	</form:form>



	<c:if test="${!empty mapaList}">
		<h3>Mapas</h3>
		<table class="data">
			<tr>
				<th><spring:message code="label.nome" /></th>
				<th><spring:message code="label.rotas" /></th>
			</tr>
			<c:forEach items="${mapaList}" var="mapa">
				<tr>
					<td style="width: 10%;">${mapa.nome}</td>
					<td>
						<table>
							<tr>
								<td style="width: 10%;">
									<spring:message code="label.rotas" />
								</td>
								<td>
									<c:forEach items="${mapa.rotas}" var="rota">
										Do ponto '${rota.origem}' para o ponto '${rota.destino}' a distancia eh: '${rota.distancia}'<br> 
									</c:forEach>
								</td>								
							</tr>
						</table>					
					</td>
				</tr>
		
			</c:forEach>
		</table>
	</c:if>
	
	<table>
		<tr>
			<td>
				<a href="../index.jsp"><spring:message code="label.home" /></a>
			</td>
		</tr>
	</table>	


</body>
</html>
